<!DOCTYPE HTML>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
   <title>task012</title>
</head>
   <style type="text/css">
	.text{
		margin:30px;
	}
	.text:hover{ 
		width:220px;
		-webkit-transition:border linear .1s,-webkit-box-shadow linear .2s; 
		-webkit-box-shadow:0 0 18px red; 
		moz-box-shadow: 2px 2px 10px red;/*兼容firefox*/
		box-shadow:2px 2px 10px red;/*兼容opera或ie9*/
	} 
   .rectangle{
		width:300px;
		height:200px;
   }
   .left{
		width:50%;
		height:200px;
		float:left;
		background-color:#008100;
   }
   .right{
		width:50%;
		height:200px;
		float:right;
		background-color:#008100;
   }
   .table-striped{
		margin:30px;
   		background-color:#ccc;
   }
	.table-striped > tbody > tr:nth-child(odd) > td {
		background-color: #fff;
	}
	.table-striped > tbody > tr:nth-child(1),tr:nth-child(2),tr:nth-child(3){color:red}
	
	.banner{
		position: relative;
		width: 300px;
		overflow: hidden;
	}

	.banner-container{
		width: 300%;
		height: 100%;
		position: relative;
		left: 0;
		transition: 0.5s left;
		font-size: 0;
		word-spacing: 0;
		letter-spacing: 0;
	}
	.banner-container li{
		display: inline-block;
		list-style: none;
		width: 300px;
		height: 100px;
	}
	.banner-container li:nth-child(1){
		background-color: #00f;
	}
	.banner-container li:nth-child(2){
		background-color: #0f0;
	}
	.banner-container li:nth-child(3){
		background-color: #f00;
	}

	.banner-controller{
		position: absolute;
		right: 0;
		bottom: 0;
	}

	.banner-controller a{
		text-decoration: none;
		display: inline-block;
		width: 28px;
		height: 28px;
		line-height: 28px;
		font-size: 16px;
		background-color: #fff;
		opacity: 0.5;
		text-align: center;
		color: #cccccc;
	}
	.banner-controller a:visited{
		color: #cccccc;
	}

	#num1:target~.banner-container{
		left: 0
	}
	#num2:target~.banner-container{
		left: -100%;
	}
	#num3:target~.banner-container{
		left: -200%;
	}
   </style>
   <script type="text/javascript"> 
		$(function(){ 
		$("#num2").hover(function(){ 
		$(".left").css(background-color,#0100FE); 
		}
	</script> 
<body>
	<table  class="table-striped" border='1'cellspacing="0" cellpadding="0">
	<thead style="background-color:#000;color:#fff;text-align:left;">
		<tr>
		  <th>排名</th>
		  <th>网站</th>
		  <th>热度</th>
		</tr>
	</thead>
	<tbody>
		<tr>
		  <td>1.</td>
		  <td>百度前端技术学院</td>
		  <td>13000</td>
		</tr>
		<tr>
		  <td>2.</td>
		  <td>百度前端技术学院</td>
		  <td>13000</td>
		</tr>
		<tr>
		  <td>3.</td>
		  <td>百度前端技术学院</td>
		  <td>13000</td>
		</tr>
		<tr>
		  <td>4.</td>
		  <td>百度前端技术学院</td>
		  <td>13000</td>
		</tr>
		<tr>
		  <td>5.</td>
		  <td>百度前端技术学院</td>
		  <td>13000</td>
		</tr>
		<tr>
		  <td>6.</td>
		  <td>百度前端技术学院</td>
		  <td>13000</td>
		</tr>
		<tr>
		  <td>7.</td>
		  <td>百度前端技术学院</td>
		  <td>13000</td>
		</tr>
		<tr>
		  <td>8.</td>
		  <td>百度前端技术学院</td>
		  <td>13000</td>
		</tr>
		<tr>
		  <td>9.</td>
		  <td>百度前端技术学院</td>
		  <td>13000</td>
		</tr>
		<tr>
		  <td>10.</td>
		  <td>百度前端技术学院</td>
		  <td>13000</td>
		</tr>
	</tbody>
	</table>
	<form><input class="text" type="text" name="firstname"></form>
	
	<div class="banner">
        <span id="num1"></span>
        <span id="num2"></span>
        <span id="num3"></span>
        <ul class="banner-container">
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div class="banner-controller">
            <a href="#num1">1</a>
            <a href="#num2">2</a>
            <a href="#num3">3</a>
        </div>
    </div>
</body>
</html>
	
	
	
	
	
	
	
   